<template>
<div class=paly-main>
<div class='play-player'>
        <ul class="clearfix">
            <li class="clearfix">
                <a href="javascript:void(0);" class='dismin fro'></a>
                <a href="javascript:void(0);" class='dismin stop'></a>
                <a href="javascript:void(0);" class='dismin fast'></a>
            </li>
            <li>
                <span></span>
                 <el-slider v-model="value2"></el-slider>
                 <span></span>
            </li>
            </ul>
    </div>
</div>
</template>
<script>
export default {
      data(){
          return{
             value2:0,
             displayid:0
          }
      },
      mounted(){
            this.init();
      },
      methods:{
          init(){
              let target = this;
               target.fetch({
                   url:'/check/music',
                   method:'GET',
                   params:{
                       id:target.displayid
                   }
               }).then(function (response) {

               }) 
          }
      }
 }
</script>
<style scoped>
    .paly-main{
           position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #343333;
    height: 40px;
    }
   .play-player{
        text-align: center;
        padding: 0;
        margin: 0 auto;
   }
.play-player li a{
          float: left;
 }
 .play-player ul{
     margin: 0;
 }

   .play-player li{
       float: left;  
        margin-right: 20px;
      list-style: none;
   }
   .dismin{
        display: block;
        float: left;
        width: 28px;
        height: 28px;
        margin-right: 8px;
        margin-top: 5px;
        text-indent: -9999px;
        background:url('/static/playbar.png')  no-repeat 0 9999px;
   }
   .fro{
        background-position: 0 -130px;
   }
   .stop{
           width: 36px;
    height: 36px;
    margin-top: 0;
    background-position: 0 -204px;
   }
   .fast{
           background-position: -80px -130px;
   }
   .el-slider{
       width: 400px;
   }

</style>

